<template>
  <div>
    <div>
      <div class="werapp">
        <div class="top-item">
          <h1>品类管理</h1>
          <el-button
            type="primary"
            @click="$router.push('/product-category/add')"
            ><i class="el-icon-plus"></i>添加商品</el-button
          >
        </div>
        <h4>当前商品分类ID：{{ids}}</h4>
        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="id" label="品类id" width="180">
          </el-table-column>
          <el-table-column prop="name" label="品类名称" width="180">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="updata(scope.$index, scope.row)"
                >修改名称</el-button
              >
              <el-button
                size="mini"
                v-show="show"
                @click="handleEdit(scope.$index, scope.row)"
                >查看其子品类</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { Pcategory, updatacategory } from "../../api/index";
export default {
  data() {
    return {
      options: [
        {
          value: "orderNo",
          label: "按订单号查询",
        },
      ],
      values: "",
      value: "",
      type: "",
      list: [],
      ids:"",
      show:true,
    };
  },
  created() {
    this.getdata();
  },
  methods: {
    // filters(){

    // },
    // 渲染
    getdata() {
      Pcategory()
        .then((res) => {
          console.log(res);
          this.list = res.data;
        })
        .catch((e) => {
          console.log(e);
        });
    },
    updata(index, row) {
      console.log(row);
      // var nengr=window.prompt("请输入新的品类名称");
      // categoryId: 100001
      // categoryName: 777
      // prompt.text=row.name
      row.name = window.prompt("请输入新的品类名称", row.name);
      updatacategory({ categoryId: row.id, categoryName: row.name }).then(
        (res) => {
          console.log(res);
          alert(res.data);
        }
      );
    },
    // 查看
    handleEdit(index, row) {
      this.show=false;
      console.log(index, row);
      this.ids=row.id
      Pcategory({categoryId:row.id})
        .then((res) => {
          console.log(res);
          this.list = res.data;
        })
        .catch((e) => {
          console.log(e);
        });
      // this.list = this.list.filter((c) => {
      //   return c.parentId === this.list.parentId;
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.werapp {
  padding: 15px 30px;
  .top-item {
    display: flex;
    justify-content: space-between;
  }
}
</style>